<template>
    <div style="height: 100%;">
        <div @click="jumpToElement">test跳转</div>
        <div class="long-box" style="height: 2000px;width: 100%;background-color: red;"></div>
        <div style="height: 50px;" id="test">test跳转的地方</div>
        <div class="long-box" style="height: 2000px;width: 100%;background-color: blue;"></div>
        <!-- <header-container>
            <m-header></m-header>
            <header-tab :titleInfor="HeaderTabNavArray"
                v-for="(item, index) in pageTree.header[type.TabHead]" :key="index"
                v-sdrag:real="{id: item.id, com: item.id, dragable: 0, type: type.TabHead}"
            >
            </header-tab>
        </header-container> -->
        <!-- <div style="height: 100%;">
            <translate-main :lengths="HeaderTabNavLength">
                <self-page></self-page>
            </translate-main>
        </div> -->
        
        <!-- <content-container  style="min-height: 200px;">
            
            <carousel 
                v-for="(item, index) in pageTree.content[type.carousel]" :key="index"
                v-sdrag:real="{id: item.id, com: item.id, type: type.carousel}">
            </carousel>
            <user-card v-for="(item, index) in pageTree.content[type.userCard]" :key="index"
                v-sdrag:real="{id: item.id, com: item.id, type: type.userCard, editable:false}" >
            </user-card>
        </content-container> -->
    </div>
</template>
<script>
    import {getPageTree, initDomTree} from "../../utils/getPageTree";
    //引入包裹“真实-基础组件”的组件
    import HeaderContainer from "../../real-components/HeaderContainer";
    import ContentContainer from "../../real-components/ContentContainer";
    import FooterContainer from "../../real-components/FooterContainer";
    //引入真实-基础组件
    import TranslateMain from "../../real-components/TranslateTest";
    import SelfPage from "./SelfPage";
    import HeaderTab from "../../real-components/TabHead";
    import Header from "../header";
    import Carousel from "../../real-components/HomeCarousel";
    //引用utils文件下的方法
    import getPageName from "../../utils/getPageName";
    export default {
        data() {
            return {
                type: {
                    carousel: "HomeCarousel",
                    userCard: "UserCard",
                    TabHead: "TabHead"
                }
            }
        },
        computed: {
            pageName() {
                return getPageName();
            },
            pageTree() {
                return getPageTree(this);
            },
            HeaderTabNavArray() {
                if (getPageTree(this).header[this.type.TabHead][0].config && getPageTree(this).header[this.type.TabHead][0].config.pages) {
                    let arr = getPageTree(this).header[this.type.TabHead][0].config.pages.filter(item => {
                        //只返回启用的
                        return item.state === "1";
                    }).map(item => {
                        return {goodsClassName: item.name};
                    });
                    // arr.unshift({goodsClassName: "首页"});
                    return arr; 
                } else {
                    return [];
                }
            },
            HeaderTabNavLength() {
                return this.HeaderTabNavArray.length;
            }
        },
        methods: {
            jumpToElement() {
                let el = document.querySelector("#test");
                el.scrollIntoView();
            }
        },
        components: {
            "header-container": HeaderContainer,
            "m-header": Header,
            "content-container": ContentContainer,
            "carousel": Carousel,
            // "user-card": UserCard,
            "header-tab": HeaderTab,
            "self-page": SelfPage,
            TranslateMain,
        },
        created() {
            // console.log("getPageTree(this).header[this.type.TabHead]", getPageTree(this).header[this.type.TabHead]);
        },
        mounted() {
            initDomTree(this.$store.getters.getDomTree[this.pageName]);
            // initDomTree(this.pageTree);
        },
        updated() {
            // console.log("this.$store.getters.getDomTree[this.pageName]", this.$store.getters.getDomTree[this.pageName])
            // initDomTree(this.$store.getters.getDomTree[this.pageName]);
            // console.log()
            // initDomTree(this.pageTree);
        }
    }
</script>
<style>
</style>